<template>
  <!-- 弹出层 -->
  <div class="position-pop-container">
    <!-- 评分弹框 -->
    <van-popup
      class="score-popup"
      :close-on-click-overlay="false"
      v-model="value"
      @click-overlay="$emit('input', false)"
    >
      <div class="content">
        <h3>请根据实际情况为企业打分</h3>
        <ul class="detail-box">
          <li>
            <span>岗位描述</span>
            <van-rate v-model="positionScore" />
          </li>
          <li>
            <span>面试情况</span>
            <van-rate v-model="interviewScore" />
          </li>
          <li>
            <span>面试官</span>
            <van-rate v-model="interviewerScore" />
          </li>
        </ul>
        <!-- 职位选择 -->
        <van-field
          readonly
          clickable
          class="position-van-field"
          name="position"
          :value="position"
          label="职位选择"
          placeholder="点击选择面试的职位"
          @click="showPositionPicker = true"
        />
        <!-- 输入区域 -->
        <van-field
          class="score-field"
          v-model="content"
          rows="6"
          type="textarea"
          placeholder="请输入留言"
        />
        <!-- 按钮 -->
        <div class="bottom-box van-hairline--top">
          <div class="cancel-btn" @click="$emit('input', false)">取消</div>
          <!-- 通过取反设置内容  -->
          <div
            class="submit-btn van-hairline--left "
            :class="{ disabled: !(positionId && content) }"
            @click="submitComment"
          >
            提交
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 输入框 -->
    <van-popup v-model="showPositionPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="positions"
        @confirm="onConfirm"
        @cancel="showPositionPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入接口
import { companyPositions, addComment } from '../../api/api'

export default {
  data () {
    return {
      positionScore: 5,
      interviewScore: 5,
      interviewerScore: 5,
      content: '',
      // 分页相关 为了获取所有数据
      limit: 9999999,
      start: 0,
      // 职位列表数据
      positions: [],
      // 是否显示职位弹框
      showPositionPicker: false,
      // 显示的职位文本信息
      position: '',
      // 提交的职位信息
      positionId: ''
    }
  },
  props: {
    // 双向绑定的数据
    value: {
      type: Boolean,
      default: false
    },
    // 企业id
    companyId: {
      type: Number,
      default: 0
    }
  },
  // 获取企业数据
  async created () {
    const positionRes = await companyPositions({
      id: this.companyId,
      limit: this.limit,
      start: this.start
    })
    // 保存数据
    this.positions = positionRes.data.list
  },
  methods: {
    // 点击提价评论数据
    async submitComment () {
      if (!(this.positionId && this.content)) return
      // console.log('ok')
      // 提交数据
      const addRes = await addComment({
        positionScore: this.positionScore,
        interviewScore: this.interviewScore,
        interviewerScore: this.interviewerScore,
        position: this.positionId,
        tags: ['面试官很nice', '面试效率高'],
        content: this.content
      })
      const data = addRes.data
      // 处理总分
      data.score = parseFloat(
        (data.positionScore + data.interviewerScore + data.interviewScore) / 3
      )
      // 头像
      data.user.avatar = process.env.VUE_APP_URL + data.user.avatar
      // console.log(addRes)
      // 关闭弹框
      this.$emit('input', false)
      // 把新增的数据抛出去给父组件
      this.$emit('onAdded', data)
    },
    // 点击选择职位
    onConfirm (item, index) {
      // 保存职位名
      this.position = item.name
      // 保存职位id
      this.positionId = item.id
      // 关闭弹框
      this.showPositionPicker = false
    }
  }
}
</script>

<style lang="less">
.position-pop-container {
  .position-van-field {
    padding-left: 61px;
  }
}
</style>
